<template>
  <el-card>
    <el-form inline>
      <el-form-item>
        <el-input placeholder="用户名" v-model="username" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="ZoomIn" type="primary" @click="inquiry"
          >查询</el-button
        >
        <el-button @click="clearInputValue">清空</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="showAddPage">添加</el-button>
    <el-button type="warning">批量删除</el-button>
    <el-table
      border
      class="mt-10"
      v-loading="loading"
      :data="useList"
      row-key="id"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="100" align="center" />
      <el-table-column label="用户名" prop="username" width="100" />
      <el-table-column label="用户昵称" prop="nickName" width="260" />
      <el-table-column label="角色列表" prop="roleName" width="260" />
      <el-table-column
        label="创建时间"
        prop="gmtCreate"
        width="300"
        align="center"
      />
      <el-table-column
        label="更新时间"
        prop="gmtModified"
        width="300"
        align="center"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template v-slot="{ row }">
          <el-button
            :icon="UserFilled"
            type="info"
            size="small"
            @click="showSetRole(row)"
          />
          <el-button :icon="Edit" type="primary" size="small" />
          <el-button :icon="Delete" type="danger" size="small" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="trademark-pagination"
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[4, 8, 12]"
      layout="prev, pager, next, jumper,sizes,total"
      :total="total"
      @size-change="getUserList"
      @current-change="getUserList"
    />
    <el-dialog v-model="dialogVisible" title="修改品牌">
      <el-form
        label-width="100px"
        ref="userFormRef"
        :model="userFormData"
        :rules="userFormRules"
      >
        <el-form-item label="品牌名称" prop="username">
          <el-input
            placeholder="请输入品牌名称"
            v-model="userFormData.username"
          />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input
            placeholder="请输入用户昵称"
            v-model="userFormData.nickName"
          />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            placeholder="请输入用户密码"
            v-model="userFormData.password"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addPage">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogSetRole" title="设置角色">
      <el-form
        label-width="100px"
        ref="setRoleRef"
        :model="setFormData"
        :rules="setFormRules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="setFormData.username" disabled />
        </el-form-item>
        <el-form-item label="用户列表" prop="roleId">
          <!-- indeterminate是控制半选框的 -->
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="setFormData.roleId"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="role in allRolesList"
              :key="role.id"
              :label="role.id"
              >{{ role.roleName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirmSetRole">保存</el-button>
          <el-button @click="dialogSetRole = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "LUser",
};
</script>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { ZoomIn, UserFilled, Edit, Delete } from "@element-plus/icons-vue";
import type { UserList, UserItem, RoleList } from "@/api/acl/model/userModel";
import {
  getUserApi,
  getSaveUserApi,
  getUserToAssignApi,
  getUserDoAssignApi,
} from "@/api/acl/user";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
const username = ref();
const useList = ref<UserList>([]);
const isSearch = ref(false);
// 渲染分页
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(4);
const total = ref(0);
const getUserList = async () => {
  const result = await getUserApi(
    currentPage.value,
    pageSize.value,
    isSearch.value ? username.value : ""
  );
  useList.value = result.items;
  total.value = result.total;
};
onMounted(getUserList);
/***** 查询按钮 ******/
const inquiry = () => {
  isSearch.value = true;
  getUserList();
};
/******* 清空按钮 ********/
const clearInputValue = () => {
  username.value = "";
  currentPage.value = 1;
  isSearch.value = false;
  getUserList();
};

/******* 添加功能 *******/
const showAddPage = async () => {
  dialogVisible.value = true;
  userFormData.username = "";
  userFormData.nickName = "";
  userFormData.password = "";
};
const dialogVisible = ref(false);
// 这里是表单三步
const userFormRef = ref<FormInstance>();
const userFormData = reactive({
  username: "",
  nickName: "",
  password: "",
});
const userFormRules = reactive<FormRules>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  nickName: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const addPage = async () => {
  await userFormRef.value?.validate();
  await getSaveUserApi(userFormData);
  ElMessage.success("添加成功");
  dialogVisible.value = false;
  getUserList();
};

/****** 设置角色 ********/
const allRolesList = ref<RoleList>([]);
const dialogSetRole = ref(false);
const showSetRole = async (row: UserItem) => {
  dialogSetRole.value = true;
  setFormData.userId = row.id;
  setFormData.username = row.username;
  const result = await getUserToAssignApi(row.id);
  setFormData.roleId = result.assignRoles.map((role) => role.id);
  allRolesList.value = result.allRolesList;
};
const setRoleRef = ref<FormInstance>();
const setFormData = reactive<{
  userId: string;
  username: string;
  roleId: string[];
}>({
  userId: "",
  username: "",
  roleId: [],
});
const setFormRules = reactive<FormRules>({
  roleId: [{ required: true, message: "请输入列表角色", trigger: "blur" }],
});

// 半选
const checkAll = ref(false);
const isIndeterminate = ref(false);

const handleCheckAllChange = (val: boolean) => {
  if (val) {
    setFormData.roleId = allRolesList.value.map((role) => role.id);
    return;
  }
  setFormData.roleId = [];
};
const handleCheckedCitiesChange = (value: any) => {
  isIndeterminate.value = false;
  if (value.length === 0) {
    checkAll.value = false;
  } else if (value.length === allRolesList.value.length) {
    checkAll.value = true;
  } else {
    isIndeterminate.value = true;
  }
};
// 确认角色设置
const confirmSetRole = async () => {
  await setRoleRef.value?.validate();
  await getUserDoAssignApi(setFormData.userId, setFormData.roleId);
  ElMessage.success("设置成功");
  dialogSetRole.value = false;
  getUserList();
};
</script>

<style scoped></style>
